<template>
	<view class="leave-add">
		<view class="main">
			<view class="title">
				留言标题：
				<input v-model="title" class="input" maxlength="18" placeholder="留言标题" />
			</view>
			<view class="title">
				留言内容：
				<textarea cols="30" v-model="content" placeholder="欢迎反馈任何意见和问题，您的反馈也是我们产品进步的动力哦！"></textarea>
			</view>
			<view class="drag">
				<view class="drag_text">{{ confirmWords }}</view>
				<slider value="0" @change="sliderChange" step="2" @changing="changing" class="slider" />
				<view class="pathway">
					<view class="pathwayl" v-bind:style="{ width: beginClientX }">
						<view :class="{ handler_ok_bg: confirmSuccess }" class="handler handler_bg"><image src="/static/img/drag.png" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="button" @click="save()">提 交</view>
	</view>
</template>

<script>
import leave from '../../../servers/my/leave.js';
export default {
	data() {
		return {
			value: '',
			textarea: '',
			content: '',
			title: '',
			beginClientX: 0 /* 距离屏幕左端距离 */,
			mouseMoveStata: false /* 触发拖动状态  判断 */,
			maxwidth: '' /* 拖动最大宽度，依据滑块宽度算出来的 */,
			confirmWords: '拖动滑块验证' /* 滑块文字 */,
			confirmSuccess: false /* 验证成功判断 */
		};
	},
	methods: {
		sliderChange(e) {
			console.log('value 发生变化：' + e.detail.value);
			if (e.detail.value > 95) {
				this.confirmSuccess = true;
				this.confirmWords = '验证通过';
			}
		},
		changing(e) {
			console.log('value 发生变化：' + e.detail.value);
			this.beginClientX = e.detail.value + '%';
		},
		save() {
			if (this.confirmSuccess) {
				uni.showLoading({
					title: '加载中',
					icon: 'loading'
				});
				if (!this.title) {
					uni.showToast({
						title: '请输入留言标题',
						icon: 'none',
					})
					return;
				}
				if (!this.content) {
					uni.showToast({
						title: '请输入留言内容',
						icon: 'none'
					});
					return;
				}
				var obj = new Object();
				obj.content = this.content;
				obj.title = this.title;
				leave
					.save(obj)
					.then(res => {
						console.log(res.data);
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功',
								complete: function() {
									uni.hideLoading();
									uni.navigateTo({
										url: '/pages/shop/my/leave_list'
									});
								}
							});
						} else {
							uni.showToast({
								title: '保存失败，请联系管理员'
							});
						}
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			} else {
				uni.showToast({
					title: '请先验证',
					icon: 'none'
				});
			}
		}
	},
	mounted() {}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.leave-add {
	height: 100%;
	background: #fff;
	.main {
		
		padding-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		.title {
			margin-top: 52rpx;
			display: flex;
			line-height: 77rpx;
			.input {
				height: 77rpx;
				line-height: 77rpx;
				flex: 1;
				border: 1px solid #e1e1e1;
				border-radius: 12rpx;
				padding:0 20rpx;
				box-sizing: border-box;
			}
			textarea {
				flex: 1;
				height: 419rpx;
				border: 1px solid #e1e1e1;
				border-radius: 12rpx;
				padding: 20rpx;
			}
		}
		.drag {
			position: relative;
			background-color: #fff;
			margin-top: 50rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			text-align: center;
			border: 1px solid #bd3c8c; /*no*/
			border-radius: 45rpx;
			overflow: hidden;
			.slider {
				position: absolute;
				left: 45rpx;
				right: 45rpx;
				opacity: 0;
				z-index: 9;
			}
			.pathway {
				// width: 100%;
				background: #000;
				margin: 10px 18px;
				.pathwayl {
					width: 0;
					position: relative;
				}
			}
			.handler {
				position: absolute;
				top: -18rpx;
				right: -54rpx;
				width: 118rpx;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #bd3c8c;
				border-radius: 35rpx;
				color: #fff;
				text-align: center;
				cursor: move;
			}
			.handler_bg {
				image {
					width: 29rpx;
					height: 29rpx;
				}
			}
			.handler_ok_bg {
				display: none;
			}
			.drag_bg {
				background-color: #bd3c8c;
				height: 90rpx;
				width: 0rpx;
				opacity: 0;
			}
			.drag_text {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				right: 0rpx;
				text-align: center;
				color: #bd3c8c;
			}
		}
	}
	.button {
		margin: 105rpx 20rpx 0;
		line-height: 90rpx;
		background: linear-gradient(80deg, #d2158a, #fc6395);
		text-align: center;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
	}
}
</style>
